<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>自定义HttpClient</title>
        <link rel='stylesheet prefetch' href='https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css'>
        <link rel="stylesheet" type="text/css" href="${ctx}/css/global.min.css"/>
        <link href="${ctx}/css/jquery-ui.css" rel="stylesheet">

        <script src="${ctx}/js/jquery.js"></script>
        <script src="${ctx}/js/jquery-ui.js"></script>
        <style>
            label.mt {
                margin-top: 12px;
            }

            div.mtb {
                margin-top: 8px;
                margin-bottom: 8px;
            }

            .red:hover {
                background: red;
            }

            #dialog p {
                text-align: center;
            }

        </style>
    </head>
    <body>
        <div class="container mtb" style="margin-left: 5%;">

            <div class="mtb">
                <h3 class="page-header" style="margin: -10px 0 20px; width: 90%">接口测试工具</h3>

                <!--  <label class="mt">接口地址:</label>-->
                <select id="requestMethod" class="selected form-select-button form-control"
                        style="display: inline-block;width: 10%" disabled>
                    <option value="GET">GET</option>
                    <option value="POST" selected>POST</option>
                </select><input type="text" class="form-control" id="url" style="display: inline-block;width: 80%"
                                value=""
                                disabled><br>

                <div class="mtb" style="width: 90%;margin-top: -5px">
                    <label class="mt">消息头:</label>
                    <textarea class="well" id="requestHeader" style="width: 100%; height: 10px;resize: none;" disabled>
            </textarea>
                </div>

                <div class="mtb" style="width: 90%; margin-top: -35px">
                    <label class="mt">消息体:</label>
                    <textarea class="well" id="requestBody" style="width: 100%; height: 250px;resize: none;" disabled>
            </textarea>
                </div>

                <div style="width: 90%;position: relative; margin-top: -25px">
                    <button class="copy hide display-none"></button>
                    <input type="submit" class="btn btn-primary" name="validate" data-ga="validate" id="validate"
                           value="send">
                    <button type="button" id="dialog-link" class="btn btn-primary" style="margin-left: 10px;"
                            <c:if test="${sessionScope.loginUser.id!=requestMessage.createUserId}">disabled</c:if>
                    >
                        修改
                    </button>
                    <button type="button" class="btn red" style="position: absolute;bottom: 0px;right: 5px;z-index: 9"
                            id="delete"
                            data-html="index"
                            <c:if test="${sessionScope.loginUser.id!=requestMessage.createUserId}">disabled</c:if>
                    >
                        删除
                    </button>
                </div>

                <div class="mtb" style=" width: 90%; margin-top: -8px">
                    <label class="mt">返回结果:</label>
                    <textarea class="well" id="showResult"
                              style="width: 100%; height: 200px;resize: none;" disabled>
            </textarea>
                </div>
            </div>


            <!-- ui-dialog -->
            <div id="dialog" title="测试案例信息修改">
                <p>
                    <label>是否公开:</label>
                    <select id="isPublic" class="selected form-select-button form-control"
                            style="display: inline-block; width: 25%">
                        <option value="1">公开</option>
                        <option value="0" selected>不公开</option>
                    </select>
                </p>
            </div>
        </div>
        <script type="text/javascript">
            var RequestMessageId = '${requestMessage.id}';
            //返现求情信息
            $("#url").val('${requestMessage.url}');
            $("#isPublic").val('${requestMessage.isPublic}');
            $("#requestMethod").val('${requestMessage.requestMethod}');
            $("#requestHeader").val('${requestMessage.requestHeader}');
            $("#requestBody").val(jsonFormat('${requestMessage.requestBody}'));
            //发送请求
            $("#validate").click(function () {
                if ("send" != $(this).val()) {
                    alert("请求发送中,请勿点击");
                    return;
                }
                $(this).val("send...");
                //发请求获取响应
                $.ajax({
                    url: '${ctx}/requestMessage/test.do',
                    type: 'POST',  // 默认为GET
                    data: {
                        id: RequestMessageId
                    },
                    timeout: 5000, // 超时时间
                    success: function (result) {
                        try {
                            JSON.parse(result.message);
                            $("#showResult").text(jsonFormat(result.message));
                        } catch (e) {
                            $("#showResult").text(result.message);
                        }
                        $("#validate").val("send");
                    },
                    error: function (xhr, textStatus) {
                        console.log('错误');
                        console.log(xhr);
                        console.log(textStatus);
                        $("#validate").val("send");
                    }
                })


            });


            //包含了修改案例是否公开状态的代码
            $("#dialog").dialog({
                autoOpen: false,
                width: 400,
                buttons: [
                    {
                        text: "确认",
                        click: function () {
                            var that = $(this);
                            var id = RequestMessageId;
                            var isPublic = $("#isPublic").val();

                            //发ajax请求保存测试案例
                            $.ajax({
                                url: '${ctx}/requestMessage/update.do',
                                type: 'POST',  // 默认为GET
                                data: {
                                    isPublic: isPublic,
                                    id: id
                                },
                                timeout: 5000, // 超时时间
                                success: function (result) {
                                    if (result.success) {
                                        alert("修改成功");
                                        that.dialog("close");
                                    } else {
                                        alert(result.message);
                                    }
                                },
                                error: function (xhr, textStatus) {
                                    alert("调用保存接口失败,请重试");
                                }
                            });

                        }
                    },
                    {
                        text: "取消",
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });
            $("#dialog-link").click(function (event) {
                $("#dialog").dialog("open");
                event.preventDefault();
            });
            $("#dialog-link, #icons li").hover(
                function () {
                    $(this).addClass("ui-state-hover");
                },
                function () {
                    $(this).removeClass("ui-state-hover");
                }
            );

            //删除案例
            $("#delete").click(function () {
                $.ajax({
                    url: '${ctx}/requestMessage/delete.do',
                    type: 'POST',  // 默认为GET
                    data: {
                        id: RequestMessageId
                    },
                    timeout: 5000, // 超时时间
                    success: function (result) {
                        if (result.success) {
                            alert("删除成功");
                            parent.location.reload()
                        } else {
                            alert(result.message)
                        }
                    },
                    error: function (xhr, textStatus) {
                        alert("删除接口调用失败,请稍后重试")
                    }
                });

            });


            //格式化json
            function jsonFormat(text_value) {
                if (text_value == "") {
                    return "";
                } else {
                    var res = "";
                    for (var i = 0, j = 0, k = 0, ii, ele; i < text_value.length; i++) {//k:缩进，j:""个数
                        ele = text_value.charAt(i);
                        if (j % 2 == 0 && ele == "}") {
                            k--;
                            for (ii = 0; ii < k; ii++) ele = "    " + ele;
                            ele = "\n" + ele;
                        } else if (j % 2 == 0 && ele == "{") {
                            ele += "\n";
                            k++;
                            debugger;
                            for (ii = 0; ii < k; ii++) ele += "    ";
                        } else if (j % 2 == 0 && ele == ",") {
                            ele += "\n";
                            for (ii = 0; ii < k; ii++) ele += "    ";
                        } else if (ele == "\"") j++;
                        res += ele;
                    }
                    return res;
                }
            }
        </script>

    </body>
</html>